<template>
  <div class="tab">
    <router-link tag="div" class="tab-item" to="/recommend" replace>
      <div class="icon">
        <icon-svg icon-class="faxian" />
      </div>
      <div class="text">推荐</div>
    </router-link>
    <router-link tag="div" class="tab-item" to="/my" replace>
      <div class="icon">
        <icon-svg icon-class="my" />
      </div>
      <div class="text">我的</div>
    </router-link>
    <router-link tag="div" class="tab-item" to="/singer" replace>
      <div class="icon">
        <icon-svg icon-class="singer" />
      </div>
      <div class="text">歌手</div>
    </router-link>
    <router-link tag="div" class="tab-item" to="/rank" replace>
      <div class="icon">
        <icon-svg icon-class="rank" />
      </div>
      <div class="text">排行</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'tab'
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  .tab {
    height: 54px;
    display: flex;
    font-size: @font-size-medium-x;
    background: @color-background;
    box-shadow: 0 0 5px @color-hl-background-2;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      transition: color .3s;
      .icon, .text {
        flex: 1;
      }
      .icon {
        padding-top: 1px;
        .icon-svg { font-size: 25px }
      }
      .text {
        line-height: 27px;
      }
    }
    .router-link-active { color: @color-theme }
  }
</style>
